import { createApp, defineComponent, inject } from 'vue'
import './window.css'

const mywindow = defineComponent({
  data () {
    return {
      height: 30,
      borderTop: '1px solid #536788',
      localData: {
        title: '提示',
        content: '',
        buttons: ''
      }
    }
  },
  render () {
    return <div>
      <div class='window_top'>
        <div class='window_title'>{ this.localData.title }</div>
        <button class='window_close' title='关闭' onclick={ this.closeWindow }></button>
      </div>
      <div ref='middleContent' class='window_middle' style={{ width: this.localData.width + 'px', height: this.localData.height - this.height - 30 + 'px' }}></div>
      <div ref='bottomContent' class='window_bottom' style={{ height: this.height + 'px', borderTop: this.borderTop }}>
      </div>
    </div>
  },
  mounted () {
    const params = inject('params')
    this.localData = { ...this.localData, ...params }
    this.$refs.middleContent.appendChild(this.localData.content)
    if (this.localData.buttons === '') {
        this.height = 0
        this.borderTop = 'none'
    } else {
        this.$refs.bottomContent.appendChild(this.localData.buttons)
    }
  },
  methods: {
    closeWindow () {
      this.localData.callback.close()
    }
  }
})

function drag () {
  const target = arguments[0]
  target.addEventListener('mousedown', function (event) {
      const disx = event.clientX - target.offsetLeft
      const disy = event.clientY - target.offsetTop
      document.onmousemove = function (event) {
        target.style.left = event.clientX - disx + 'px'
        target.style.top = event.clientY - disy + 'px'
      }
      document.onmouseup = function () {
          document.onmousemove = null
          document.onmouseup = null
          return false
      }
  })
}

export default {
    install (app) {
      const defaultOptions = {
        target: document.body,
        min_size: {
            width: 155,
            height: 100
        },
        use: {
          drag: false
        }
      }
      app.config.globalProperties.$createWindow = function (option) {
        const finalOptions = { ...defaultOptions, ...option }
        finalOptions.width = finalOptions.width || 0
        finalOptions.height = finalOptions.height || 0
        finalOptions.width = Math.max(finalOptions.width, finalOptions.min_size.width)
        finalOptions.height = Math.max(finalOptions.height, finalOptions.min_size.height)
        const div = document.createElement('div')
        div.className = 'window_box'
        div.style.width = finalOptions.width + 'px'
        div.style.height = finalOptions.height + 'px'
        div.style.left = (window.innerWidth - finalOptions.width) / 2 + 'px'
        div.style.top = (window.innerHeight - finalOptions.height) / 2 + 'px'
        defaultOptions.target.appendChild(div)
        const app = createApp(mywindow)
        const params = {
          width: finalOptions.width,
          height: finalOptions.height,
          title: finalOptions.title,
          content: finalOptions.content,
          buttons: finalOptions.buttons || '',
          callback: {
            close: function () {
              div.remove()
            }
          }
        }
        app.provide('params', params)
        app.mount(div)

        if (finalOptions.use.drag) {
          drag(div)
        }

        return div
      }
      app.config.globalProperties.$closeWindow = function (dom) {
        dom.remove()
      }
      // 添加一个钩子函数，例如在应用挂载之前做一些事情
      app.mixin({
        beforeMount () {
          // console.log('组件挂载前执行')
        }
      })
    }
  }
